<template>
  <div class="container">
    <el-row :gutter="10" class="row">
      <el-col :span="8">
        <el-card class="table-card time-line">
          <el-timeline>
            <el-timeline-item
              v-for="task in sortedTaskList"
              :key="task.id"
              :timestamp="parseTime(task.modifiedAt, '{y}-{m}-{d}')"
              placement="top"
            >
              <el-card class="timeline-card">
                <div class="timeline-header">
                  <h4>更新项目：{{ task.title }}</h4>
                  <div class="tag-container">
                   优先级： <dict-tag :options="dict.type.task_priority" :value="task.priority"/>
                   状态： <dict-tag :options="dict.type.task_status" :value="task.status"/>
                  </div>
                </div>
                <p class="timeline-footer">{{ task.assignedToName }} 提交于 {{ parseTime(task.modifiedAt, '{y}-{m}-{d}') }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="table-card">
          <el-table @row-click="projectClick"  :data="projectList" border>
            <el-table-column label="项目名称" align="center" prop="name"/>
            <el-table-column label="项目状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.project_status" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column label="开始日期" align="center" prop="startDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="createdBy"/>
            <el-table-column label="项目创建时间" align="center" prop="createdAt" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="table-card">
          <el-table   @row-click="(row)=>{showTaskInit=true;nowTask=row}" :data="taskList" border>
            <el-table-column label="所属项目" align="center" prop="projectId"/>
            <el-table-column label="任务标题" align="center" prop="title"/>
            <el-table-column label="优先级" align="center" prop="priority">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.task_priority" :value="scope.row.priority"/>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.task_status" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column label="开始日期" align="center" prop="startDate" width="170">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="截止日期" align="center" prop="dueDate" width="170">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
<!--      <el-col :span="16">-->
<!--        <el-card class="table-card">-->
<!--          <div>-->
<!--            <el-calendar v-if="taskList!=null">-->
<!--              &lt;!&ndash; 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法&ndash;&gt;-->
<!--              <template-->
<!--                slot="dateCell"-->
<!--                slot-scope="{date, data}">-->
<!--                <div class="container">-->
<!--                  <p :class="data.isSelected ? 'is-selected' : ''" class="flex-container">-->
<!--                    <span class="left-content">{{ data.day.split('-').slice(1).join('-') }}</span>-->
<!--                    <dict-tag v-if="getNowTask(data.day)!=='-1'" :options="dict.type.task_priority"-->
<!--                              :value="getNowTask(data.day)" class="right-content"/>-->
<!--                  </p>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-calendar>-->
<!--          </div>-->

<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
<!--    <el-row :gutter="10" class="row">-->
<!--      <el-col :span="12">-->
<!--        <el-card class="table-card">-->
<!--          <el-table @row-click="projectClick"  :data="projectList" border>-->
<!--            <el-table-column label="项目名称" align="center" prop="name"/>-->
<!--            <el-table-column label="项目状态" align="center" prop="status">-->
<!--              <template slot-scope="scope">-->
<!--                <dict-tag :options="dict.type.project_status" :value="scope.row.status"/>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="开始日期" align="center" prop="startDate" width="180">-->
<!--              <template slot-scope="scope">-->
<!--                <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="创建人" align="center" prop="createdBy"/>-->
<!--            <el-table-column label="项目创建时间" align="center" prop="createdAt" width="180">-->
<!--              <template slot-scope="scope">-->
<!--                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-card class="table-card">-->
<!--          <el-table   @row-click="(row)=>{showTaskInit=true;nowTask=row}" :data="taskList" border>-->
<!--            <el-table-column label="所属项目" align="center" prop="projectId"/>-->
<!--            <el-table-column label="任务标题" align="center" prop="title"/>-->
<!--            <el-table-column label="优先级" align="center" prop="priority">-->
<!--              <template slot-scope="scope">-->
<!--                <dict-tag :options="dict.type.task_priority" :value="scope.row.priority"/>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="状态" align="center" prop="status">-->
<!--              <template slot-scope="scope">-->
<!--                <dict-tag :options="dict.type.task_status" :value="scope.row.status"/>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="开始日期" align="center" prop="startDate" width="170">-->
<!--              <template slot-scope="scope">-->
<!--                <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="截止日期" align="center" prop="dueDate" width="170">-->
<!--              <template slot-scope="scope">-->
<!--                <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-dialog
      title="详情"
      :visible.sync="showTaskInit"
      width="80%">
      <task-init :task="nowTask"></task-init>
    </el-dialog>
  </div>
</template>

<script>
import {listMyAllProject} from "@/api/project/project";
import {listMyAllTask} from "@/api/project/task";
import TaskInit from "@/components/Task/index.vue";

export default {
  name: "Index",
  components: {TaskInit},
  dicts: ['project_status', 'task_status', 'task_type', 'task_priority'],
  data() {
    return {
      showTaskInit:false,
      nowTask:null,
      projectList: [],
      taskList: null
    };
  },
  created() {
    this.getData();
  },
  computed: {
    sortedTaskList() {
      if (!this.taskList) return [];
      return this.taskList
        .filter(task => task.createdAt) // 确保有创建时间
        .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); // 按时间倒序
    }
  },
  methods: {
    projectClick(row){
      this.$router.push({name: 'projectInit', params: {projectId: row.id}})
    },
    taskClick(row){
      this.$router.push({name: 'projectInit', params: {projectId: row.projectId},query: {active: 2}})
    },
    getNowTask(data) {
      let status = '-1'
      let map = {
        high: 3, centre: 2, low: 1
      }
      let num = -1
      const list = this.taskList.filter(item => {
        if (item.dueDate === data && item.status !== "over") {
          return item
        }
      })
      if (list.length > 0) {
        for (let task in list) {
          if (map[list[task].priority] > num) {
            num = map[list[task].priority]
            status = list[task].priority
          }
        }
      }
      return status;
    },
    getData() {
      listMyAllProject({}).then(res => {
        this.projectList = res.data;
      });
      listMyAllTask({}).then(res => {
        this.taskList = res.data;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.time-line {
  overflow-y: auto; /* 只允许垂直滚动 */
  padding-right: 10px; /* 避免滚动条遮挡内容 */
}

.row {
  margin-bottom: 10px;
}

.container {
  padding: 10px;
}

.table-card {
  height:1000px;
  padding: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.el-table {
  font-size: 14px;
}

::v-deep .el-calendar-table {

  .el-calendar-day {

    padding: 0;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.container {
  /* 确保容器足够宽以容纳左右内容 */
  width: 100%; /* 或者根据需要设置特定宽度 */
}

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中内容 */
}

.left-content {
  /* 左侧内容的样式，可以根据需要调整 */
}

.right-content {
  /* 右侧内容的样式，可以根据需要调整 */
  margin-left: 10px; /* 将右侧内容推到右边 */
}

/* 可选的：为选中状态添加样式 */
.is-selected {
  background-color: #f0f8ff; /* 示例背景色 */
  font-weight: bold; /* 示例字体加粗 */
}

.timeline-card {
  padding: 10px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag-container {
  display: flex;
  gap: 10px;
}

.timeline-footer {
  margin-top: 5px;
  font-size: 12px;
  color: gray;
}
</style>
